<template>
    <div class="classifyArea">
        <Search></Search>
        <div class="classify clearFix">
            <div class="classifyLeft">
                <ul >
                    <li v-for="(item,index) in carName" :key="index"  @click="showContent(index)">
                        {{item.cat_name}}
                    </li>
                </ul>
            </div>
            <div class="classifyRight">
                <div class="everyClassify" v-for="(item,i) in nowProduct" :key="i">
                    <h3>{{item.cat_name}}</h3>
                    <div class="productClassify">
                    <div class="everyProduct"  v-for="(product,index) in item.children" :key="product.cat_id" @click="getList(i,index)">
                        <img :src="product.cat_icon" alt="">
                        <p>{{product.cat_name}}</p>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="foontBlank"></div>
    </div>
</template>
<script>
import Search from '@/components/Search'
import '../router/index'
export default {
    name:'classify',
    data () {
        return {
            carName:[],
            nowProduct:[]
        }
    },
    components:{
        Search
    },
    mounted (){
        // 获取分类
        let promise1=this.axios.get('/categories')
        promise1.then((res)=>{
            // console.log(res)
            this.carName=res.data.message
        })
    },
    methods:{
        showContent(index){
            // console.log(index)
            this.nowProduct=this.carName[index].children
            // console.log(this.nowProduct)
        },
        // 获取商品列表 goods/search
        getList(i,index){
            // console.log(i,index)
            // console.log(this.nowProduct[i].children[index])
            // console.log(this.nowProduct[i])
            let cid=this.nowProduct[i].children[index].cat_id
            // console.log(cid)
            this.$router.push({
                path:'/product',
                query:{
                    cid:cid
                }
            })
        }

    }
}
</script>
<style lang="less" scoped>
.classifyArea{
    // height: 100%;
    width: 100%;
    height: 80%;
    .classify{
        width: 100%;
        margin-bottom: 60px;

        // 左边导航
        .classifyLeft{
            width: 30%;
            float: left;
            background-color: aquamarine;
        }
        // 右边具体内容
        .classifyRight{
            width: 70%;
            float: left;
            .productClassify{
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                width: 100%;
                .everyProduct{
                    width: 30%;
                    border: 1px solid black;
                    img{
                        width: 100%;
                    }
                }
            }
        }
    }
    .foontBlank{
        height: 30px;
    }
}
</style>